<!--
  模块：问卷调查 - 统计
-->
<template>
  <div class="question-statistic">
    <!-- 添加页面的主部分 -->
    <div class="question-add-body">
      <!-- 问卷信息 -->

      <div class="question-add-body-info">
        <el-card style="height: 100%; overflow: auto">
          <CardFormTitle title="问卷信息" />

          <div class="question-add-body-info-header-body">
            <div class="question-add-body-info-header-body-div title">
              <div class="question-add-body-info-header-body-title">
                问卷标题
              </div>
              <div class="question-add-body-info-header-body-titleInput">
                <el-input
                  type="text"
                  class="titleinput"
                  v-model.trim="title"
                  disabled
                />
                <span style="color: red">*</span>
              </div>
            </div>

            <div class="question-add-body-info-header-body-div startDate">
              <div class="question-add-body-info-header-body-title">
                开启时间 - 截止时间
              </div>

              <div class="question-add-body-info-header-body-startDate">
                <el-date-picker
                  v-model="time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="截止时间"
                  class="date"
                  disabled
                ></el-date-picker>

                <span style="color: red">*</span>
              </div>
            </div>

            <div class="question-add-body-info-header-body-div author">
              <div class="question-add-body-info-header-body-title">发布人</div>
              <div class="question-add-body-info-header-body-author">
                <el-input
                  v-model.trim="releaseUser"
                  class="author"
                  :disabled="true"
                ></el-input>
              </div>
            </div>

            <header class="releaseDate">
              <div>发布日期</div>
              <el-date-picker
                v-model="releaseDate"
                type="date"
                class="releaseDate_date"
                :disabled="true"
              ></el-date-picker>
            </header>
          </div>

          <CardFormTitle title="问卷统计" />

          <header class="question-add-body-info-header-body contentHeader">
            <Statistic
              v-for="(radioQue, radioIndex) in radio.questions"
              :key="radioIndex"
              :infoId="radioQue.id"
              :mainTitle="radioQue.mainTitle"
              :num="radio.num[radioIndex]"
              :radioNum="radioQue.inputValueArray"
              :isDisabled="true"
              :isQuestionShowStyle="isShowQue"
              :queId="queId"
            />
          </header>
        </el-card>
        <!---->
      </div>
    </div>
  </div>
</template>

<script>
import Statistic from '@/views/question/components/question-statistic/index.vue'

import App from '@/App.vue'
import $ from 'jquery'
import Vue from 'vue'
//引入 coment 组件
import moment from 'moment'

//引入的请求
import { fetchQuestion } from '@/api/question/index.js'

export default {
  inject: ['reload'],
  name: 'QuestionStatistic',
  components: {
    Statistic,
  },
  watch: {
    '$route.query.id'(newRoute, oldRoute) {
      if (newRoute !== undefined) {
        this.reload()
      }
      console.log(newRoute, 'newRoute')
      console.log(oldRoute, 'oldRoute')
    },
  },
  beforeMount() {
    this.queDetail()
  },
  data() {
    return {
      //问卷标题
      title: '',
      //开启 至 截止 时间
      time: ['', ''],
      //问卷id
      queId: this.$route.query.id,

      //发布人
      releaseUser: '', //user-info
      //发布日期
      releaseDate: '',
      //是否显示序号
      isShowQue: '',

      //单选问卷题目对象
      radio: {
        questions: [],
        num: [], //问卷序号
        statisticCount: {}, //统计人数
      },
    }
  },
  props: {
    id: {
      type: String,
    },
  },
  methods: {
    //查询详情请求
    queDetail() {
      console.log(this.$route.query)
      fetchQuestion(this.$route.query.id).then((res) => {
        console.log(res)
        this.title = res.data.title
        this.time = [res.data.startTime, res.data.endTime]
        this.releaseUser = res.data.publishUserName
        this.releaseDate = res.data.publishTime
        //问卷题目的数组
        this.questions = res.data.questions

        //* 查询 answer 表
        // statisticalQuestion(this.$route.query.id).then((answer) => {
        res.data.questions.forEach((info, index) => {
          this.radio.questions.splice(this.radio.questions.length, 0, info)
          this.radio.num.splice(this.radio.num.length, 0, index + 1)
        })
        // console.log(answer)
        // })

        //是否显示序号
        if (res.data.questions[0].displayNumber === 1) {
          this.isShowQue = 'display:block'
        } else {
          this.isShowQue = 'display:none'
        }
      })
    },
  },
}
</script>

<style scoped>
.question-statistic {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
  overflow: auto;
}

/* 添加页面的主体 */
.question-add-body {
  width: 96%;
  height: 90%;
  background-color: #e2e8f1;
  margin: auto;
  margin-top: 20px;
  /* border: 1px solid; */
  display: flex;
  position: relative;
}
.question-add-body-info {
  display: inline-block;
  overflow-x: hidden;
  overflow-y: auto;
}
.question-add-body-info {
  width: 100%;
  background-color: white;
  margin-right: 14px;
}

.question-add-body-info-header {
  display: flex;
  width: 100%;
  height: 30px;
  margin-top: 30px;
  /* border: 1px solid; */
  line-height: 30px;
}
.question-add-body-info-header header {
  display: inline-block;
  width: 5px;
  height: 100%;
  background-color: lightblue;
  margin-right: 10px;
}
.question-add-body-info-header div {
  display: inline-block;
  width: 90%;
  height: 100%;
  margin-left: 10px;
  /* border: 1px solid; */
  line-height: 30px;
  font-size: 21px;
}
.question-add-body-info-header-body {
  width: 100%;
  margin-top: 20px;
  margin-left: 35px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.question-add-body-info-header-body-div {
  width: 210px;
  height: 78px;
  /* border: 1px solid; */
  /* display: inline-block; */
  /* line-height: 100px; */
}
.question-add-body-info-header-body-div span {
  margin-left: 1px;
}
.question-add-body-info-header-body .title {
  width: 330px;
  /* margin-right: 20px; */
}
.question-add-body-info-header-body .startDate {
  width: 510px;
}
.question-add-body-info-header-body .startDate,
.question-add-body-info-header-body .endDate,
.question-add-body-info-header-body .author {
  margin-right: 20px;
}
.question-add-body-info-header-body .startDate {
  width: 410px;
}
.question-add-body-info-header-body-titleInput {
  width: 310px;
  margin: 0px;
}
.question-add-body-info-header-body-title {
  font-size: 18px;
  margin-bottom: 8px;
}
.date {
  width: 380px;
}
.question-add-body-info-header-body-author {
  width: 200px;
}
.titleinput {
  border: 1px solid lightgrey;
  border-radius: 5px;
  width: 300px;
  height: 35.99px;
  outline: none;
}
.titleinput:focus {
  border: 1px solid #3b51b9;
}
.info {
  margin-left: 30px;
}
.releaseDate div {
  font-size: 18px;
  margin-bottom: 5px;
}
.releaseDate_date {
  width: 200px;
  /* background: blue; */
}

.contentHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>

<style>
.question-add-body .el-icon-date {
  position: relative;
  left: 170px;
}
.question-add-body .el-input__prefix {
  width: 0;
  height: 0;
}
.question-add-body .el-input__suffix {
  display: none;
}
.question-add-body .el-icon-time:before {
  content: '\e78e';
  /* position: relative;
  left: 170px; */
  font-size: 17.5px;
}

/* "\e78e" */
</style>

